<template>
  <div>
    <el-row>
      <el-col :span="3">
        <left-nav-menu :length="3" @select="leftMenuSelect">
          <span slot="0"><i class="icon-accept-screen" />在线监测</span>
          <span slot="1"><i class="icon-round-chart" />人工监测</span>
          <span slot="2"><i class="icon-pie-arrow" />统计分析</span>
        </left-nav-menu>
      </el-col>
      <el-col :span="21">
        <online-monitoring
          :key="leftNavMenuIndex+'index1'"
          v-if="leftNavMenuIndex === '0'"
        ></online-monitoring>
        <manual-monitoring
          :key="leftNavMenuIndex+'index2'"
          v-if="leftNavMenuIndex === '1'"
        ></manual-monitoring>
        <statistical-analysis
          :key="leftNavMenuIndex+'index3'"
          v-show="leftNavMenuIndex === '2'"
        ></statistical-analysis>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LeftNavMenu from "../components/LeftNavMenu";
import TopNavMenu from "../components/TopNavMenu";
import OnlineMonitoring from "./monitor-control/OnlineMonitoring";
import ManualMonitoring from "./monitor-control/ManualMonitoring";
import StatisticalAnalysis from "./monitor-control/StatisticalAnalysis";
import Axios from "axios";

export default {
  name: "MonitorControl",
  data () {
    return {
      leftNavMenuIndex: '0',
    }
  },
  components: {
    StatisticalAnalysis,
    ManualMonitoring,
    OnlineMonitoring,
    TopNavMenu, LeftNavMenu
  }, methods: {
    leftMenuSelect (index) {
      this.leftNavMenuIndex = index;
    }
  },
  created () {

  }

}
</script>

<style scoped>
.el-col-3 >>> .left-menu {
  height: 91vh;
}
span {
  font-size: 1.4em;
}
i {
  margin-right: 12px;
  font-size: 1.2em;
  color: black;
}
</style>